<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择资源</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/resoure.css">
</head>

<body>
    <section id="resource">
        <header id="history-header">
            <a href="data.html" class="header-return"></a>
            <p>选择资源</p>
            <p></p>
        </header>
        <section id="resource-content">
            <div class="set-meal">
                <div class="meal">
                    <h3>三亚5日4晚半自助游套餐</h3>
                    <p>出发日期：<time>2017-9-10</time></p>
                    <p>出行人数：<span>3</span> 成人</p>
                </div>
                <div class="total">
                    <p>6512</p>
                    <p><a href="">总额明细></a></p>
                </div>
            </div>
            <div class="ticket">
                <div class="route">
                    <div class="form">
                        <h3>三亚</h3>
                        <p>首都国际机场</p>
                        <time>6:30</time>
                    </div>
                    <div class="fly"></div>
                    <div class="to">
                        <h3>北京</h3>
                        <p>凤凰国际机场</p>
                        <time>10:40</time>
                    </div>
                </div>
                <div class="detail">
                    <table>
                        <tr>
                            <td>日期</td>
                            <td>时间</td>
                        </tr>
                        <tr>
                            <td><time><span>2017-9-10</span> 星期<span>五</span></time></td>
                            <td><time><span>6:30 </span>am</time></td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>航班</td>
                            <td>舱位</td>
                        </tr>
                        <tr>
                            <td>中国国航CA1353</td>
                            <td>经济舱</td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>飞行时长</td>
                            <td>出行人数</td>
                        </tr>
                        <tr>
                            <td><time>约<span>5</span>小时<span>20</span>分钟</time></td>
                            <td><span>3</span>人</td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td><a href="">改签/预订限制></a></td>
                            <td><a href="">重选航班></a></td>
                        </tr>
                    </table>
                    </table>
                </div>
            </div>
            <div class="ticket">
                <div class="route">
                    <div class="form">
                        <h3>北京</h3>
                        <p>凤凰国际机场</p>
                        <time>17:10</time>
                    </div>
                    <div class="fly"></div>
                    <div class="to">
                        <h3>三亚</h3>
                        <p>首都国际机场</p>
                        <time>22:30</time>
                    </div>
                </div>
                <div class="detail">
                    <table>
                        <tr>
                            <td>日期</td>
                            <td>时间</td>
                        </tr>
                        <tr>
                            <td><time><span>2017-9-16</span> 星期<span>六</span></time></td>
                            <td><time><span>17:10 </span>pm</time></td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>航班</td>
                            <td>舱位</td>
                        </tr>
                        <tr>
                            <td>大新华航空CN7180</td>
                            <td>经济舱</td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td>飞行时长</td>
                            <td>出行人数</td>
                        </tr>
                        <tr>
                            <td><time>约<span>5</span>小时<span>20</span>分钟</time></td>
                            <td><span>2</span>人</td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td><a href="">改签/预订限制></a></td>
                            <td><a href="">重选航班></a></td>
                        </tr>
                    </table>
                    </table>
                </div>
            </div>
            <div class="reserve">
                <div class="reserve-box">
                    <p>两成人起订</p>
                    <p>每单立减800元！</p>
                    <div class="reserve-count">
                        <span class="minus oper">-</span><span class="count">2</span><span class="add oper">+</span>
                    </div>
                </div>
            </div>
            <div class="reserve free">
                <div class="reserve-box">
                    <p>+0元/人 免费升级</p>
                    <p>价值168团餐！</p>
                    <div class="reserve-count">
                        <span class="minus oper">-</span><span class="count">3</span><span class="add oper">+</span>
                    </div>
                </div>
            </div>
            <article class="bill">
                <h3 class="title"> 附加额外费用账单<span>?</span></h3>
                <div class="room">
                    <div class="set-meal">
                        <div class="meal">
                            <p>单房差</p>
                            <div class="reserve-count">
                                <span class="minus oper">-</span><span class="count">1</span><span
                                    class="add oper">+</span>
                            </div>
                        </div>
                        <div class="total">
                            <p><span>520</span>/人</p>
                        </div>
                    </div>
                    <div class="set-meal">
                        <div class="meal">
                            <p>超值换购水上乐园成人门票</p>
                            <div class="reserve-count">
                                <span class="minus oper">-</span><span class="count">3</span><span
                                    class="add oper">+</span>
                            </div>
                        </div>
                        <div class="total">
                            <p><span>50</span>/人</p>
                        </div>
                    </div>
                    <div class="set-meal">
                        <div class="meal">
                            <p>超值换购天涯海角门票</p>
                            <div class="reserve-count">
                                <span class="minus oper">-</span><span class="count">2</span><span
                                    class="add oper">+</span>
                            </div>
                        </div>
                        <div class="total">
                            <p><span>36</span>/人</p>
                        </div>
                    </div>
                </div>
                <div class="insurance">
                    <div class="title-box">
                        <h3>意外保险</h3>
                        <p><i></i>保险价格均为参考价，最终会以预定人真实年龄重新计算。</p>
                    </div>
                    <div class="classics">
                        <div class="classics-box">
                            <div class="checkedbox-box">
                                <div class="classics-checkbox  hide"></div>
                                <div class="checked"></div>
                            </div>
                            <div class="classics-name">
                                平安i旅行境内长线保险 经典型 最高赔偿3000元
                            </div>
                        </div>
                        <div class="price">
                            <span>120</span> 2份
                        </div>
                    </div>
                    <div class="info">
                        请您付款后24小时内提供出行人证件信息，否则将自动为您退订此保险。
                    </div>
                    <div class="classics">
                        <div class="classics-box">
                            <div class="checkedbox-box">
                                <div class="classics-checkbox"></div>
                                <div class="checked  hide"></div>
                            </div>
                            <div class="classics-name">
                                平安i旅行境内长线保险 尊贵型 含航意险
                            </div>
                        </div>
                        <div class="price">
                            <span>154</span> 2份
                        </div>
                    </div>
                    <a href="" class="rename">重选保险></a>
                </div>
            </article>
        </section>
        <footer class="next">
        <a href="fill.html">下一步，填写订单</a>
        </footer>
    </section>
    <script src="./js/zepto.js"></script>
    <script src="./js/touch.min.js"></script>
    <script src="./js/commen.js"></script>
    <script>
         var event = "onclick" in window ? "click" : "tap";
          console.log(event)
        $(".checkedbox-box").on(event,function(){
            var chill=$(this).children();
            if(chill.eq(0).hasClass("hide")){
                chill.eq(0).removeClass("hide").siblings().addClass("hide");
            }else{
                  chill.eq(1).removeClass("hide").siblings().addClass("hide");
            }
        });
        //点击加号
            $(".add").on("tap", function () {
                var num = $(this).prev().text();//获取数字
                var span = $(this).prev();
                num++;
                span.html(num);

            })




            //点击减号
            $(".minus").on("tap", function () {
                var num = $(this).next().text();
                var span = $(this).next();
                num--;
                num = num < 0 ? 0 : num--;
                span.html(num);
            })
    </script>
</body>

</html>